<template>
  <a-layout class="login-box">
    <a-layout-content class="login-content">
      <a-row align="middle" justify="center" class="login-content-main">
        <a-col class="login-content-bgc" :pull="1">
          <img :src="loginBg" width="480">
          <h2>{{ '开箱即用的中后台管理系统' }}</h2>
          <p style="margin-top: 15px">✨✨✨ 欢迎使用 'ZY·Admin' '1.0.0' </p>
          <p style="margin-top: 15px">
            <a href='https://gitee.com/Z568_568/vue3-antd-plus/stargazers'>
              <imgs src='https://gitee.com/Z568_568/vue3-antd-plus/badge/star.svg?theme=dark' alt='star' />
            </a>
            <a href='https://gitee.com/Z568_568/vue3-antd-plus/members'><img
                src='https://gitee.com/Z568_568/vue3-antd-plus/badge/fork.svg?theme=dark' alt='fork' /></a>
          </p>
        </a-col>

        <a-col class="login-content-form">
          <div v-if="!isShow" style="max-width: 500px;">
            <LoginForm @onRegisterBtn="isShow = 1" />
          </div>
          <div v-if="isShow" style="max-width: 500px;">
            <RegisterForm @onLoginBtn="isShow = 0" />
          </div>
        </a-col>
      </a-row>
    </a-layout-content>
  </a-layout>
</template>

<script lang="ts" setup>
import { reactive, ref, computed } from 'vue';
import LoginForm from "./components/LoginForm.vue";
import loginBg from '@/assets/login-bg.png';

import RegisterForm from "./components/RegisterForm.vue";
const formState = reactive({
  username: 'admin',
  password: 'admin',
  code: '',
  remember: true,
});
const isShow = ref(0)
const onFinish = values => {
  console.log('Success:', values);
  // authStore.login()

};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};
const disabled = computed(() => {
  return !(formState.username && formState.password);
});

</script>

<style lang="less" scoped>
@import "../../style/index.less";

.login-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  // background-color: #ffffff;

  .login-logo,
  .login-footer {
    // color: #444343;
    // background-color: #ffffff;

  }

  .login-content {
    height: 100%;

    .login-content-main {
      height: 100%;

      .login-content-bgc {
        text-align: center;
        padding-bottom: 100px;
      }

      .login-content-form {
        border: 1px solid #e3e3e3;
        background-color: #fff;
        padding: 60px;
        border-radius: 8px;
        overflow: hidden;
        box-sizing: border-box;

        .login-title {
          margin-bottom: 30px;
        }

        .login-form {
          max-width: 400px;
          background-color: #fff;
          overflow: hidden;

          .login-form-button {
            margin-right: 15px;
          }
        }
      }
    }
  }

  .login-footer {
    text-align: center;
    font-size: .8rem;
    // color: #828181;
  }
}
</style>
